﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PhotoViewer.aspx.cs" Inherits="photoloader.PhotoViewer" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<link href="css/ui-darkness/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-ui-1.8.16.js" type="text/javascript"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #nextPhoto
        {
            float: right;
            z-index: 9002;
            display: inline;
            position: relative;
        }
        #navBar
        {
            position: relative;
            
        }
        
        .NavButton
        {
            background-color:White;
            
        }
       
        #previosPhoto
        {
            float: left;
            z-index: 9002;
            display: inline;
            position: relative;
        }
        
        #photoContainer
        {
            z-index: 9000;
            position:fixed;
            top:100px;
            left:300px;
            height:300px;
            width:300px;
            background-color:rgba(0,0,0,0.6);
            text-align: center;
           
        }
        #photoContainerImage
        {
            z-index: 9001;
            display: inline;
            margin-left:20px;
            margin-right:20px;
            margin-bottom:20px;
            margin-top:0px;
        }
        #photoWait
        {
            position: relative;
            z-index: 9005;
        }
        
        .Hidden
        {
            display: none;
        }
        #closeButton
        {
            float:right;
            width:24px;
            height:24px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="photoViewer">
            <div id="photoTitle">
            </div>
            <div id="photoContainer">
                <div id="photoCloseBar">
                <span id="closeButton">
                    <img src="button_grey_close.png" width="24px" height="24px" /></span>
                </div>
                <img alt="" id="photoContainerImage" /><img id="photoWait" src="ajax-loader%20(3).gif"
                    class="Hidden" />
                <div id="navBar">
                    <span id="nextPhoto"><a href="#">
                        <img  id="nextButtImage" src="playback_next.png" height="24" width="24"  class="NavButton" /></a></span> <span id="previosPhoto"><a href="#">
                            <img  id="backButtImage"src="playback_prev.png" height="24" width="24"  class="NavButton" />
                        </a></span></div>
            </div>
        </div>
    </div>
    </form>
    <script type="text/javascript">
        var files;
        var currentPhoto = 0;
        var navFlag;
        var navOpc=.4;
        $(document).ready(
        function () {
            $.post('AjaxHandler.aspx', function (result) { GetFileList(result); });
        });
        $(document).ready(
        function () {
            $("#nextPhoto").click(NextPhoto);
            $("#previosPhoto").click(PreviosPhoto);
            $("#photoContainer").hover(function () { NavBarShow(); });
            $("#photoContainer").mouseover(function () { NavBarShow(); });
            $("#photoContainer").mouseleave(function () { NavBarHide(); });
            $("#nextButtImage").mouseover(function () { NavBarFullShow(); });
            $("#backButtImage").mouseover(function () { NavBarFullShow(); });
            $("#nextButtImage").mouseenter(function () { NavBarFullShow(); });
            $("#backButtImage").mouseenter(function () { NavBarFullShow(); });
            $("#nextButtImage").mouseout(function () { NavBarHalfShow(); });
            $("#backButtImage").mouseout(function () { NavBarHalfShow(); });
        }
        );

        function GetFileList(result) {
            files = JSON.parse(result);
            ShowPicture(0);
        }
        function ShowPicture(id) {
            if (isNaN(id)) {
                id = 0;
            }
            var image = $("#photoContainerImage");
            var top = image.height() / 2 + 50;
            $("#photoWait").css("top", top/2);
            $("#navBar").css("top", -(top - 50));
            $("#photoWait").show();
            $("#photoContainerImage").hide();
            $("#photoContainerImage").load(function () {
                $("#photoWait").hide();
                $("#photoContainerImage").fadeIn("slow");
                image = $("#photoContainerImage");
                var top = image.height() / 2;
                $("#photoContainer").css("height", image.height() + 40);
                $("#photoContainer").css("width", image.width() + 40);
                $("#navBar").css("top", -(top + 20));
                navFlag = true;
                NavBarShow();
            });
            var src = "ThumbnailHandler.ashx?imageUrl=Desktop\\" + files[id] + "&ext=jpg" + "&maxH=500" + "&maxW=500";
            $("#photoContainerImage").attr("src", src);

        }

        function NextPhoto() {

            NavBarHide();
            navFlag = false;
            if (currentPhoto < files.length - 1)
                currentPhoto++;
            else
                currentPhoto = 0;
            ShowPicture(currentPhoto);
        }
        function PreviosPhoto() {

            $("#navBar").hide();
            if (currentPhoto > 0)
                currentPhoto--;
            else
                currentPhoto = files.length - 1;
            ShowPicture(currentPhoto);

        }
        function NavBarShow() {
           if(navFlag)
            $("#navBar").fadeTo("fast",navOpc);

        }

        function NavBarHide() {
            $("#navBar").hide();
        }

        function NavBarFullShow() {

            navOpc = 0.8;
        }

        function NavBarHalfShow() {
            navOpc = 0.4;
        }
    
    </script>
</body>
</html>
